Page Header

Page Header

The page header consists of the breadcrumb pages and an <h1> heading tag.

View

Student Resources

HTML

<header>
  <nav>
    <ol class="cmp-breadcrumbs">
      <li class="cmp-breadcrumbs__item">
        <a class="cmp-breadcrumbs__link" data-title="Home" href="#">Home</a>
      </li>
      <li class="cmp-breadcrumbs__item">
        <a class="cmp-breadcrumbs__link" data-title="Resources" href="#">Resources</a>
      </li>
      <li class="cmp-breadcrumbs__item cmp-breadcrumbs__item--current">
        <a class="cmp-breadcrumbs__link" data-title="Student Resources" aria-current="page" href="#">Student Resources</a>
      </li>
    </ol>
  </nav>

  <h1 class="cmp-heading-1 util-margin-top-lg util-margin-top-none@print util-margin-bottom-lg@print">Student Resources</h1>
</header>

Breadcrumbs

The breadcrumbs are wrapped in a nav tag with an aria-label to maintain accessibility standards. The last link of the list should always include aria-current="page".

Attribute Description
breadcrumbPages A YAML list of pages to include in the breadcrumb navigation. Each list item should include a name and url attribtues. Accepts a list, defaults to null.
name The clickable text, should be the page title of the target page. Accepts a string, defaults to null.
url The url of the target page. Accepts a string, defaults to null.

View

HTML

<nav>
  <ol class="cmp-breadcrumbs">
    <li class="cmp-breadcrumbs__item">
      <a class="cmp-breadcrumbs__link" data-title="Home" href="#">Home</a>
    </li>
    <li class="cmp-breadcrumbs__item cmp-breadcrumbs__item--current">
      <a class="cmp-breadcrumbs__link" data-title="Faculty Resources" aria-current="page" href="#">Faculty Resources</a>
    </li>
  </ol>
</nav>